<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <div id="app">
    <ul>
      <li v-for="v in list" :key="v">{{ v }}</li>
    </ul>
    <button @click="go1go">走一走</button>
  </div>

  <script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        list: ['帅哥', '美女', '程序猿']
      },
      methods: {
        go1go() {
          this.list.push(this.list.shift())

          // 对于数组的索引赋值，Vue没有做监听处理
          // （故意的，为了效率考虑），因为数组是一个集合类型的数据结构，
          // 数组的容量无法确定，可能会比较大，如果去循环做响应式监听，比较耗费性能（卡）
          // Vue仅对数组的7个变异方法（会影响源数组的方法）进行了重写（在数组的原型链中间插入了一个原型对象）
          // push、pop、unshift、shift、reverse、sort、splice
          // [].__proto__ ==> Array.prototype
          // 插入后
          // [].__proto__ ==> Vue自己的数组原型 ==> Array.prototype

          // let temp = this.list[0]
          // for (let i = 0; i < this.list.length; i++) {
          //     this.list[i] = this.list[i + 1]
          //     if (i === this.list.length - 1) {
          //         this.list[i] = temp
          //     }
          // }
          // this.list = [...this.list]
          // console.log(this.list)
        }
      }
    })
  </script>
</body>
</html>